<template>
	<view>
		<view class="">
			<ul class="tabbar" v-for="(i,index) in daydate" :key="daydate.id">
				<li class="tabbar_son" :style="{backgroundColor: index == day? 'skyblue':'' , pointerEvents: index == day? 'none':'' }" @click="changedaydate(i,index)">
					<view class="">
						{{i.date}}
					</view>
					<view>{{i.day}}</view>
				</li>
			</ul>
		</view>
		<view style="width: 750rpx; height: 110rpx; border-bottom: 1px solid darkgray;"></view>
		<view class="">
			<ul class="selecttime" v-for="(i,index) in timechange" :key="timechange.id">
				<li class="selecttime_son" @click="changetime(i,index)" :style="{color:index == id? 'orange':''}">{{i.name}}</li>
			</ul>
		</view>
		<view style="width: 750rpx; height: 40rpx; border-bottom: 1px solid darkgray;"></view>
		<view class="">
			<ul class="image" v-for="(i,index) in distribute.length == 0? all:distribute" :key="allimage.id">
				<li class="image_son">
					<image :src="'http://124.223.168.50:8000' + i.image" style="width: 150rpx; height: 150rpx; border-radius: 30rpx;" @click="go(i)"></image>
					<view>
						{{i.name}}
					</view>
				</li>
			</ul>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import moment from 'moment'
	export default {
		data() {
			return {
				distribute:[],
				allimage:[],
				all:[],
				day:0,
				daydate:[
					{
						id:0,
						date:moment().format('YYYY-MM-DD'),
						day:moment().locale('zh-cn').format('dddd')
					},
					{
						id:1,
						date:moment(moment().format('YYYY-MM-DD')).add(1, 'days').format('YYYY-MM-DD'),
						day:moment(moment().format('YYYY-MM-DD')).add(1, 'days').locale('zh-cn').format('dddd')
					},
					{
						id:2,
						date:moment(moment().format('YYYY-MM-DD')).add(2, 'days').format('YYYY-MM-DD'),
						day:moment(moment().format('YYYY-MM-DD')).add(2, 'days').locale('zh-cn').format('dddd')
					}
				],
				id:0,
				timechange:[
					{
						id:0,
						name:'全部',
					},
					{
						id:1,
						name:'上午',
					},
					{
						id:2,
						name:'下午',
					},
					{
						id:3,
						name:'晚班',
					}
				]
			}
		},
		// 
		onLoad(){
			uni.request({
				url:'http://124.223.168.50:8000/test/list3/',
				method:'GET',
				data:{
					hospital_id:1,
					work:this.$store.state.type,
					// state:this.$store.state.type
				},
				// header: {
				//     'Content-Type': 'text/html; charset=utf-8',
				// },
				withCredentials:true,
				success: (res) => {
					console.log(res)
					this.allimage = this.all = res.data.msg
					console.log(this.allimage)
					// const date = moment().format('YYYY-MM-DD')
					this.all = this.allimage.filter(p => {
						return p.online_time == this.daydate[0].date? p:null
					})
				},
				fail: (err) => {
					console.log(err)
				}
			})
		},
		watch:{
			id(){
				// this.distribute = this.allimage.filter(p => {
				// 	console.log(p)
				// 	return p.state == this.id? p:null
				// 	// return p.state.indexOf(this.id) != -1
				// })
				
				// if(this.id == -1){
				console.log('6666666666')
				// } else {
				// 	console.log(222222222222222222)
				// }
			}
		},
		methods:{
			go(e){
				this.$store.commit('fixsrc',e)
				console.log(this.$store.state.name)
				uni.navigateTo({
					url:'../Appointmentoperation/Appointmentoperation'
				})
			},
			changetime(e,b) {
				if(b == 0) {
					this.distribute = this.all
					this.id = b
				} else {
					const count = b - 1
					const tribute = this.all.filter(p => {
					// console.log(p.state.exec(count))
						return p.state == count? p:null
					// return p
					})
					if(tribute.length === 0){
						this.$refs.uToast.show({
							type:'warning',
							message:'该时间段没有医生坐班'
						})
						// this.all = []
					} else {
						console.log('点击了')
						this.id = b
						// if(b == 0){
						// 	this.distribute = []
						// } else {
						// }
						// if(this.distribute == )
						this.distribute = tribute
						console.log(this.timechange)
						console.log(this.distribute)
					}
				}
				
			},
			changedaydate(e,b) {
				this.day = b
				this.id = 0
				this.distribute = []
				this.all = this.allimage.filter(p => {
					return p.online_time == e.date? p:null
				})
				console.log(this.daydate)
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.tabbar {
		width: 750rpx;
		/* height: 150rpx; */
		/* background-color: black; */
	}
	.tabbar .tabbar_son {
		float: left;
		width: 33.3%;
		height: 110rpx;
		/* background-color: pink; */
		/* pointer-events: none; */
		text-align: center;
	}
	.selecttime .selecttime_son {
		float: left;
		width: 25%;
		text-align: center;
		margin-top: 5rpx;
		/* background-color: deeppink; */
		/* margin: auto; */
	}
	.selecttime {
	}
	.image .image_son {
		float: left;
		margin-left: 30rpx;
		margin-top: 30rpx;
		text-align: center;
	}
	ul li {
		list-style: none;
	}
</style>